<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
              <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
              <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <div class="info_box">
            <div class="left">
                <div class="grzl">个人中心</div>
                <ul class="nav_child">
                  <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                  <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                  <li><router-link :to="{path: '/Address'}">收件地址</router-link></li>
                  <li><router-link :to="{path: '/Invoice'}">发票信息</router-link></li>
                  <li><router-link :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                  <li><router-link :to="{path: '/DrawList'}">提现记录</router-link></li>
                  <li><router-link :to="{ path: '/Logs' }">消费记录</router-link></li>
                  <li><router-link class="on" :to="{ path: '/Editpass' }">修改密码</router-link></li>
                </ul>
            </div>
            <!-- 修改密码 -->
            <div class="iinforignt" style="padding-top: 40px">
                <div style="width: 50%; margin: 0 auto">
                    <el-form ref="form" label-width="120px">
                        <el-form-item label="用户名">
                            <el-input v-model="userData.userName" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="旧密码">
                            <el-input v-model="userData.oldPass" maxlength="20" type="password" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="新密码">
                            <el-input v-model="userData.newPass"  maxlength="20" type="password" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="再次输入新密码">
                            <el-input v-model="userData.newPassRet"  maxlength="20" type="password" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="editPass">提交信息</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div class="clear"></div>
        </div>
      </center>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { Toast } from 'vant'
import User from '../../utils/user';
import Ajax from '../../utils/ajax'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
export default {
  name: 'Editpass',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      userInfo: [],
      userData: {
        userName: '',
        oldPass: '',
        newPass: ''
      }
    }
  },
  created () {
    this.userInfo = User.getInfo();
    if(!User.getToken() || !this.userInfo) {
      this.$router.replace('/Login');
      return;
    }
    this.setTitle('修改密码');
    this.userData.userName = this.userInfo.userName;
  },
  methods: {
    editPass () {
      if(this.userData.userName.trim() == '') {
        Toast('请输入用户名');
        return;
      }
      if(this.userData.oldPass.trim() == '' || this.userData.oldPass.length < 6) {
        Toast('请输入旧密码，至少需要6个字符')
        return;
      }
      if(this.userData.newPass.trim() == '' || this.userData.newPass.length < 6) {
        Toast('请输入新密码，至少需要6个字符')
        return;
      }
      if(this.userData.newPass != this.userData.newPassRet) {
        Toast('两次输入的新密码不一致');
        return;
      }
      Ajax.post('member/changepass', this.userData).then(res=>{
        if(res.code == 0) {
          Toast('密码修改成功');
          this.userData = {
            userName : this.userInfo.userName
          }
        } else {
          Toast('密码修改失败：' + res.msg);
        }
      }).catch(err=>{
        console.error(err);
        Toast('数据提交失败');
      })
    }
  }
}
</script>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
